<template>
  <div class="toubu">
    <van-nav-bar
      title="购物车 "
      left-text="返回"
      left-arrow
      safe-area-inset-top
      @click-left="onClickLeft"
    />

    <main>
      <van-checkbox-group @change="groupChange" v-model="selected">
        <van-swipe-cell v-for="(item, index) in gouWuChe" :key="index">
          <van-checkbox :name="item.id"></van-checkbox>
          <van-card :price="item.money" :title="item.miaoshu" :thumb="item.img">
            <template #tags>
              <van-tag plain type="danger">标签</van-tag>
              <van-tag plain type="danger">标签</van-tag>
            </template>
            <template #footer>
              <van-stepper
                @plus="add(item)"
                @minus="sub(item)"
                v-model="item.count"
              />
            </template>
          </van-card>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="deleteEntry(item)"
            />
          </template>
        </van-swipe-cell>
      </van-checkbox-group>
    </main>

    <van-submit-bar :price="price" button-text="提交订单" @submit="onSubmit">
      <van-checkbox @click="allCheck" v-model="checkAll">全选</van-checkbox>
      
    </van-submit-bar>

    <van-cell is-link @click="showPopup">支付</van-cell>
    <van-popup v-model="show" position="bottom" :style="{ height: '50%' }" >
      <!-- 密码输入框 -->
<van-password-input
  :value="value"
  :focused="showKeyboard"
  @focus="showKeyboard = true"
  style="border:1px solid aqua"
/>
<!-- 数字键盘 -->
<van-number-keyboard
  v-model="value"
  :show="showKeyboard"
  @blur="showKeyboard = false"
/>
    </van-popup>
    
  </div>
</template>
<script>
import { mapState } from "vuex";
import Vue from "vue";
import { Empty } from "vant";
Vue.use(Empty);
import { PasswordInput, NumberKeyboard } from "vant";
Vue.use(PasswordInput);
Vue.use(NumberKeyboard);
import { Popup } from "vant";
Vue.use(Popup);
import { Toast } from 'vant';
Vue.use(Toast);

export default {
  name: "sout",
  data() {
    return {
      checkAll: false,
      selected: [],
      value: "",
      showKeyboard: true,
      show: false,
    };
  },
  computed: {
    ...mapState(["gouWuChe"]),
    price: function () {
      let sum = 0;
      let _list = this.gouWuChe.filter((item) =>
        this.selected.includes(item.id)
      );
      _list.forEach((item) => {
        sum += item.count * item.money;
      });
      return sum * 100;
    },
  },
  created() {
    Toast.loading({
  message: '加载中...',
  forbidClick: false,
});
  },
  methods: {
    // 返回上一层
    onClickLeft() {
      this.$router.go(-1);
    },
    // 提交购物车
    onSubmit() {
      this.forbidClick=true;
      console.log("subumit", this.gouWuChe);
    },
    // 点击事件：多选
    groupChange(result) {
      if (result.length == this.gouWuChe.length) {
        this.checkAll = true;
      } else {
        this.checkAll = false;
      }
      this.selected = result;
    },
    // 全选
    allCheck() {
      if (this.checkAll) {
        this.selected = this.gouWuChe.map((e) => e.id);
      } else {
        this.selected = [];
      }
    },
  
    // 弹出层方法
    showPopup() {
      this.show = true;
      
    },
    add(entry) {
      console.log("add", entry);
      this.$store.dispatch("IncrementGouWuChe", entry).then(() => {
        console.log("增加数量成功");
      });
    },
    sub(entry) {
      console.log("sub", entry);
      this.$store.dispatch("SubGouWuChe", entry).then(() => {
        console.log("减少数量成功");
      });
    },
    deleteEntry(entry) {
      console.log("deleteEntry", entry);
      // TODO: 加一个 confim
      this.$store.dispatch("DelGouWuChe", entry).then(() => {
        alert("删除商品成功");
      });
    },
  },
};
</script>
<style scoped>
</style>